<template>
	<view class="order-action">
		<view class="order-action-container plr-16 flex flex-ai-center flex-js-center">
			<template v-if="order.order_status==1">
				<w-button type="dark" shape="circle" style='width: 174rpx;height: 64rpx;font-size: 28rpx;' :pain="true"
					@click='showCancelToast=true'>{{handleLang('取消订单')}}</w-button>
				<w-button type="colorful" shape="circle" style='width: 174rpx;height: 64rpx;font-size: 28rpx;'
					@click='showConfirm=true'>{{handleLang('确认支付')}}</w-button>
			</template>
			<template v-if="order.order_status==2">
				<!-- <w-button type="dark" shape="circle" style='width: 260rpx;' :pain="true"
					@click='toMyCollection'>{{handleLang('我的藏品')}}</w-button> -->
				<w-button type="colorful" shape="circle" style='width: 174rpx;height: 64rpx;font-size: 28rpx;'
					@click='toBuy'>{{handleLang('继续购买')}}</w-button>
			</template>
			<template v-if="order.order_status==7">
				<w-button type="colorful" shape="circle" class='flex-1' style='width: 174rpx;height: 64rpx;font-size: 28rpx;'
					:disabled="true">{{handleLang('转入中')}}</w-button>
			</template>
			<template v-if="order.order_status==3">
				<w-button type="colorful" shape="circle" class='flex-1' style='width: 174rpx;height: 64rpx;font-size: 28rpx;' @click='toBuy'>{{handleLang('继续购买')}}</w-button>
			</template>
		</view>
		<!-- 取消确认 -->
		<w-toast v-model='showCancelToast' :cancelText="handleLang('我再想想')" :submitText="handleLang('取消订单')"
			:title="handleLang('取消订单')" :content="handleLang('同一账号一段时间内取消3次订单,将会限购一段时间')" @action='changeOrderStatus'
			contentAlign="center"></w-toast>
		<!-- 支付确认 -->
		<w-modal v-model="showConfirm" title='' @action='pay'>
			<view class=" flex flex-js-center flex-ai-end">
				<text class="font-size-12 font-color-222" style="line-height: 30rpx;">￥</text>
				<text class="font-size-24 font-color-222"
					style="line-height: 48rpx;">{{order.order_type==1? order.price:order.total_price}}</text>
			</view>
			<view class="font-size-14 font-color-222 text-center mt-12">
				{{handleLang('您确认购买吗？')}}
			</view>
		</w-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import PayUtil from '@/utils/payUtil.js'
	import {
		changeOrderStatus
	} from '@/api/order/index.js'
	export default {
		props: {
			order: {
				type: Object,
				default () {
					return {

					}
				}
			}
		},
		data() {
			return {
				showCancelToast: false,
				showConfirm: false,
			}
		},
		methods: {
			...mapActions('applePay', ['getChannels']),
			changeOrderStatus(confirm) {
				if (!confirm) return;
				uni.showLoading({
					title: "订单取消中"
				})
				changeOrderStatus({
					order_type: this.order.order_type,
					status: 3,
					order_sn: this.order.order_sn
				}).then(res => {
					this.$emit('statusChange')
				})
			},
			toBuy() {
				let isApp = uni.getStorageSync('app');
				if (isApp) {
					let isIos = window.localStorage.getItem('ios')
					let action = JSON.stringify({
						action: "gotoActivity",
						params: {
							action: "gotoActivity",
							params: {
								pageKey: 'index'
							}
						}
					})
					if (isIos) {
						window.webkit.messageHandlers.callbackHandler.postMessage(action);
					} else {
						Android.webCallback(action)
					}

				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}

			},
			toMyCollection() {
				let isApp = uni.getStorageSync('app');
				if (isApp) {
					let isIos = window.localStorage.getItem('ios')
					let action = JSON.stringify({
						action: "gotoActivity",
						params: {
							pageKey: 'my'
						}
					})
					if (isIos) {
						window.webkit.messageHandlers.callbackHandler.postMessage(action);
					} else {
						Android.webCallback(action)
					}

				} else {
					uni.switchTab({
						url: '/pages/my/my'
					})
				}
			},
			pay(confirm) {
				if (!confirm) return;
				new PayUtil({
					order_id: this.order.id,
					pay_type: this.order.pay_type,
					order_number: this.order.order_sn,
					pay_way: this.order.pay_way,
					order_type: this.order.order_type
				});
			}
		}
	}
</script>

<style lang="scss">
	.order-action {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// width: 750rpx;
		// padding-bottom: env(safe-area-inset-bottom);

		&-container {
			height: 120rpx;
		}
	}
</style>